/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{
    background: #000;
    width: 100%;
    .wrap{
        width: 1200px;
        margin: 0 auto;
        height: atuo;
        
        header{
            width: 100%;
            height: 110px;
            background: #000;
            .top{
                width: 100%;
                height: 38px;
                line-height: 38px;
                text-align: right;
                display: block;
                a{
                    text-decoration: none;
                    color: #b2b2b2;
                    margin-right: 13px;
                }
            }
            .bottom{
                width: 100%;
                height: 72px;
                .logo{
                    float: left;
                    padding-left: 20px;
                    text-decoration: none;
                    img{
                        vertical-align: top;
                    }
                }
                .menu{
                    float: left;
                    width: 270px;
                    height: auto;
                    line-height: 72px;
                    text-align: center;
                    margin-left:270px;
                    span{
                        display: inline-block;
                        position: relative;
                        .shop-list{
                            width: 1000px;
                            height: 330px;
                            position: absolute;
                            top: 72px;
                            left: -443px;
                            background: #fff;
                            padding: 0px 100px;
                            display: none;
                            ul{
                                float: left;
                                padding: 30px 20px;
                                height: 270px;
                                li{
                                    height: 30px;
                                    line-height: 30px;
                                    a{
                                        height: 30px;
                                        color: #000;
                                    }
                                }
                                li:first-of-type{
                                    a{
                                       font-weight: bolder; 
                                    }
                                }
                                li:hover{
                                    a{
                                        border: none;
                                        color: #f99302;
                                    }
                                }
                            }
                            ul:first-of-type{
                                border-right:1px solid #ccc;
                                font-weight: bolder;
                            }
                        }
                    }
                    span:hover{                        
                        .shop-list{
                            display: block;
                        }                        
                    }
                    a{
                        text-decoration: none;
                        display: inline-block;
                        height: 68px;
                        margin: 0px 10px;
                        color: white;
                    }
                    a:hover{
                        border-bottom:2px solid #f99302;
                    }
                }
                .nav{
                    float: right;
                    width: 400px;
                    height: 51px;
                    padding-top: 21px;
                    line-height: 30px;
                    .search{
                        height: 28px;
                        width: 250px;
                        border: 1px solid white;
                        border-radius: 14px;
                        display: inline-block;
                        margin-right: 15px;
                        
                        #search{
                            border: none;
                            height: 26px;
                            width: 210px;
                            vertical-align: top;
                            border-top-left-radius: 13px;
                            border-bottom-left-radius: 13px;
                            background: #000;
                            color: white;
                            padding-left: 10px;
                            outline: none ;
                        }
                        i{
                            padding: 0px;
                            padding-right: 5px;
                        }
                    }
                    .cart{
                        display: inline-block;
                        height: 100%;
                        position: relative;
                        a{
                            display: inline-block;
                            .number{
                                position: absolute;
                                display: inline-block;
                                top: -5px;
                                left: 25px;
                                width: 20px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                border-radius:10px ;
                                background: #f99302;
                                color: white;
                            }
                        }
                        .to-cart{
                            position: absolute;
                            top: 50px;
                            left: -300px;
                            width: 360px;
                            height: 180px;
                            border-radius:5px ;
                            background: white;
                            text-align: center;
                            display: none;
                            h2{
                                padding: 30px 0px;
                                margin: 0px 30px;
                                border-bottom: 1px solid #ccc;
                            }
                            a{
                                display: inline-block;
                                width: 310px;
                                height: 40px;
                                background: #f99302;
                                line-height: 40px;
                                text-decoration: none;
                                color: white;
                                font-weight: bolder;
                                border-radius:5px ;
                                margin-top: 25px;
                            }
                        }
                    }
                    .cart:hover{
                        .to-cart{
                            display: block;
                        }
                    }
                    i{
                        padding: 0px 20px;
                        display: inline-block;
                        color: #fff;
                        font-weight: 100;
                    }
                }
            }
        }
      
        .banner{
            width: 100%;
            height: 500px; 
            a{
                float: left;
                img{
                    width: 1200px;
                    height: 500px;
                    vertical-align: top;
                } 
            }          
        }
                
        main{
            background: #fff;
            width: 100%;
            overflow: hidden;
            .top{
                margin: 62px 44px;
                height: 367px;
                .left{
                    float: left;
                    overflow: hidden;
                    a{
                        float: left;
                        img{
                            width: 372px;
                            height: 367px;
                        }
                        img:hover{
                            transform: scale(1.1);
                            transition: transform 1s;
                        }
                    }
                }
                .right{
                    float: right;
                    overflow: hidden;
                    a{
                        float: left;
                        img{
                            width: 735px;
                            height: 367px;
                        }
                        img:hover{
                            transform: scale(1.1);
                            transition: transform 1s;
                        }
                    }
                }
            }
            .middle{
                width: 1112px;
                margin: 62px 44px;
                width: 100%;
                h2{
                    width: 100%;
                    height: 27px;
                    line-height: 27px;
                    font-weight: bolder;
                    font-family: "Microsoft YaHei", "Arial";
                }
                .box{
                    width: 350px;
                    height: 440px;
                    position: relative;
                    border: 1px solid #ccc;
                    margin-right: 24px;
                    margin-bottom: 24px;
                    border-radius: 5px;
                    display: inline-block;
                    cursor: pointer;
                    .new{
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 350px;
                        height: auto;
                        background: #fff;
                        .big{
                            display: block;
                            .img{
                                vertical-align: top;
                            }
                        }
                        ul{                        
                            width: 100%;
                            height: 68px;
                            display: none;
                            li{
                                width: 68px;
                                height: 68px;
                                float: left;
                                margin-right: 19px;
                                img{
                                    width: 68px;
                                    height: 68px;
                                }
                            }
                        }
                        div{
                            h3{
                                text-align: center;
                                height: 16px;
                                margin-top: 14px;
                                width: 100%;
                                color: #333333;
                            }
                            p{
                                width: 100%;
                                height: 16px;
                                text-align: center;
                                margin: 14px 0px 30px;
                                line-height: 16px;
                                color: #f99302;
                            }
                        }
                    }
                }
                .new:hover{
                    box-shadow: 4px 4px 5px 5px #ccc ;
                    top: -1px;
                    left: -1px;
                    transition: all .5s;
                    z-index: 9999;
                    ul{
                        display: block;
                    }
                }
            }
            .bottom{
                width: 1112px;
                margin: 62px 44px;
                width: 100%;
                h2{
                    width: 100%;
                    height: 27px;
                    line-height: 27px;
                    font-weight: bolder;
                    font-family: "Microsoft YaHei", "Arial";
                }
                .box{
                    width: 350px;
                    height: 440px;
                    position: relative;
                    border: 1px solid #ccc;
                    margin-right: 24px;
                    margin-bottom: 24px;
                    border-radius: 5px;
                    display: inline-block;
                    cursor: pointer;
                    .new{
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 350px;
                        height: auto;
                        background: #fff;
                        .big{
                            display: block;
                            .img{
                                vertical-align: top;
                            }
                        }
                        ul{                        
                            width: 100%;
                            height: 68px;
                            display: none;
                            li{
                                width: 68px;
                                height: 68px;
                                float: left;
                                margin-right: 19px;
                                img{
                                    width: 68px;
                                    height: 68px;
                                }
                            }
                        }
                        div{
                            h3{
                                text-align: center;
                                height: 16px;
                                margin-top: 14px;
                                width: 100%;
                                color: #333333;
                            }
                            p{
                                width: 100%;
                                height: 16px;
                                text-align: center;
                                margin: 14px 0px 30px;
                                line-height: 16px;
                                color: #f99302;
                            }
                        }
                    }
                }
                .new:hover{
                    box-shadow: 4px 4px 5px 5px #ccc ;
                    top: -1px;
                    left: -1px;
                    transition: all .5s;
                    z-index: 9999;
                    ul{
                        display: block;
                    }
                }
            }
        }  
        
        footer{
            width: 100%;
            height: 380px;
            background: #0d0d0d;
            overflow: hidden;
            .content{
                height: 290px;
                margin: 40px;
                margin-bottom: 0px;
                dl{
                    float: left;
                    padding-right: 30px;
                    color: white;
                    margin: 5px;
                    dt{
                       margin-bottom: 20px; 
                       font-weight: bolder;
                    }
                    dd{
                        margin-bottom: 10px;
                        font-size: 12px;
                        a{
                            text-decoration: none;
                            color: white;
                        }
                    }
                }
                .contact{
                    float: right;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    h2{
                        color: white;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                    }
                    ul{
                        li{
                            float: left;
                            opacity: .5;
                            a{
                                display: inline-block;
                            }
                        }
                        li:first-of-type{
                            margin-left: 15px;
                            margin-right: 10px;
                        }
                        li:first-of-type:hover{
                            opacity: 1;
                        }
                        li:last-of-type{
                            position: relative;
                            .code{
                                display: none;
                                position: absolute;
                                top: 50px;
                                left: -200px;
                                width: 240px;
                                height: 150px;
                                div{
                                    float: left;
                                    margin: 5px;
                                    img{
                                        vertical-align: top;
                                    }
                                    p{
                                        color: #ccc;
                                        line-height: 30px;
                                        font-size: 12px;
                                    }
                                }
                            }
                        } 
                        li:last-of-type:hover{
                            opacity: 1;
                            .code{
                                display: block;
                            }
                        }    
                    }
                }
            }
            .certificate{
                height: 50px;
                margin: 0px 40px;
                text-align: right;
                line-height: 50px;
                color: #808080;
                font-size: 12px;
                a{
                    text-decoration: none;
                    color: #808080;
                    margin-right: 50px;
                }
            }
        }

    }
}